<template>
  <div class="header-container">
    <div class="header-content">
      <div class="header-left">
        <img 
          v-if="!isHome"
          :src="backIcon"
          alt="返回"
          class="back-icon"
          @click="goBack"
        />
        <h1 
          class="header-title"
          :style="{ fontWeight: isHome ? '600' : '300' }"
        >
          {{ title }}
        </h1>
      </div>

      <button 
        class="image-btn"
        @click="handleClick"
        @animationend="removeAnimation"
        :class="{ 
          'animate__animated animate__pulse': isAnimated,
          'animate__faster': isAnimated
        }"
        v-if="isHome"
      >
        <img 
          :src="buttonImage" 
          alt="搜索按钮"
          class="header-button-image"
        />
      </button>
    </div>

    <div class="header-divider"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  buttonImage: {
    type: String,
    required: true
  },
  isHome: {
    type: Boolean,
    default: true
  },
  backIcon: {
    type: String,
    required: false
  },
  title:{
    type:String,
    default:'标题'
  }
})

const router = useRouter()
const isAnimated = ref(false)

const handleClick = () => {
  isAnimated.value = true
  router.push('/search')
}

const removeAnimation = () => {
  isAnimated.value = false
}

const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
.image-btn {
  --animate-duration: 0.3s; /* 控制动画速度 */
}

.header-container {
  width: 100%;
  padding: 20px 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  min-height: 42px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-title {
  font-size: 24px;
  color: #303133;
  margin: 0;
  transition: font-weight 0.3s ease;
}

.back-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.back-icon:hover {
  transform: scale(1.1);
}

.back-icon:active {
  transform: scale(0.9);
}

.image-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.3s ease;
}

.header-button-image {
  width: 32px;
  height: 32px;
  display: block;
  transition: transform 0.3s ease;
}

.image-btn:hover .header-button-image {
  transform: scale(1.1);
}

.image-btn:active .header-button-image {
  transform: scale(0.9);
}

.header-divider {
  height: 1px;
  background-color: #e4e7ed;
  margin-top: 15px;
}
</style>